<div class="settings-container">
  <div class="flex align-items-center justify-content-between mb-4">
    <h1>Download Clients</h1>
  </div>

  <!-- Loading/Error State Component -->
  <div class="mb-4">
    <app-loading-error-state
      *ngIf="downloadClientLoading() || downloadClientError()"
      [loading]="downloadClientLoading()"
      [error]="downloadClientError()"
      loadingMessage="Loading settings..."
      errorMessage="Could not connect to server"
    ></app-loading-error-state>
  </div>

  <!-- Content - only shown when not loading and no error -->
  <div *ngIf="!downloadClientLoading() && !downloadClientError()">
    
    <!-- Client Management Card -->
    <p-card styleClass="settings-card mb-4">
      <ng-template pTemplate="header">
        <div class="flex align-items-center justify-content-between p-3 border-bottom-1 surface-border">
          <div class="header-title-container">
            <h2 class="card-title m-0">Download Clients</h2>
            <span class="card-subtitle">Manage download client instances</span>
          </div>
        </div>
      </ng-template>

      <!-- Empty state when no clients -->
      <div *ngIf="clients.length === 0" class="no-items text-center py-5 text-color-secondary">
        <i class="pi pi-download text-4xl mb-3"></i>
        <p class="m-0">No download clients configured</p>
        <small>Add a client to start downloading</small>
      </div>

      <!-- Clients List -->
      <div *ngIf="clients.length > 0" class="items-list">
        <div 
          *ngFor="let client of clients" 
          class="item-item p-3 border-round surface-border border-1 mb-3"
          [ngClass]="{ 'enabled': client.enabled }"
        >
          <div class="flex justify-content-between align-items-center">
            <div class="item-info flex-1">
              <div>
                <div class="flex align-items-center mb-2">
                  <h4 class="m-0 mr-2">{{ client.name }}</h4>
                  <p-tag 
                    [value]="getClientTypeLabel(client)" 
                    [severity]="'info'"
                    class="mr-2"
                  ></p-tag>
                  <p-tag 
                    [value]="client.enabled ? 'Enabled' : 'Disabled'" 
                    [severity]="client.enabled ? 'success' : 'secondary'"
                  ></p-tag>
                </div>
                <div class="item-details client-details text-sm text-color-secondary">
                  <div *ngIf="client.host">
                    <label>Host: {{ client.host }}</label>
                  </div>
                  <div *ngIf="client.urlBase">
                    <label>URL Base: {{ client.urlBase }}</label>
                  </div>
                </div>
              </div>
            </div>
            <div class="item-actions">
              <button 
                pButton 
                type="button" 
                icon="pi pi-pencil" 
                class="p-button-rounded p-button-text p-button-sm mr-1"
                pTooltip="Edit client"
                tooltipPosition="left"
                [disabled]="downloadClientSaving()"
                (click)="openEditClientModal(client)"
              ></button>
              <button 
                pButton 
                type="button" 
                icon="pi pi-trash" 
                class="p-button-rounded p-button-text p-button-danger p-button-sm"
                pTooltip="Delete client"
                tooltipPosition="left"
                [disabled]="downloadClientSaving()"
                (click)="deleteClient(client)"
              ></button>
            </div>
          </div>
        </div>
      </div>

      <!-- Action buttons -->
      <div class="card-footer mt-3">
        <button 
          pButton 
          type="button" 
          icon="pi pi-plus" 
          label="Add Client"
          class="p-button-outlined"
          [disabled]="downloadClientSaving()"
          (click)="openAddClientModal()"
        ></button>
      </div>
    </p-card>
  </div>
</div>

<!-- Client Modal -->
<p-dialog 
  [(visible)]="showClientModal" 
  [modal]="true" 
  [closable]="true"
  [draggable]="false"
  [resizable]="false"
  styleClass="instance-modal"
  [header]="modalTitle"
  (onHide)="closeClientModal()"
>
  <form [formGroup]="clientForm" class="p-fluid instance-form">
    <div class="field flex flex-row">
      <label class="field-label">
        <i class="pi pi-question-circle field-info-icon" 
           (click)="openFieldDocs('enabled')" 
           pTooltip="Click for documentation"></i>
        Enabled
      </label>
      <div class="field-input">
        <p-checkbox formControlName="enabled" [binary]="true"></p-checkbox>
        <small class="form-helper-text">Enable this download client</small>
      </div>
    </div>

    <div class="field">
      <label for="client-name">
        <i class="pi pi-question-circle field-info-icon" 
           (click)="openFieldDocs('name')" 
           pTooltip="Click for documentation"></i>
        Name *
      </label>
      <input 
        id="client-name"
        type="text" 
        pInputText 
        formControlName="name" 
        placeholder="My Download Client"
        class="w-full"
      />
      <small *ngIf="hasError(clientForm, 'name', 'required')" class="form-error-text">Name is required</small>
    </div>

    <div class="field">
      <label for="client-type">
        <i class="pi pi-question-circle field-info-icon" 
           (click)="openFieldDocs('typeName')" 
           pTooltip="Click for documentation"></i>
        Client Type *
      </label>
      <p-select
        id="client-type"
        formControlName="typeName"
        [options]="typeNameOptions"
        optionLabel="label"
        optionValue="value"
        placeholder="Select client type"
        appendTo="body"
        class="w-full"
      ></p-select>
      <small *ngIf="hasError(clientForm, 'typeName', 'required')" class="form-error-text">Client type is required</small>
    </div>

    <ng-container>
      <div class="field">
        <label for="client-host">
          <i class="pi pi-question-circle field-info-icon" 
             (click)="openFieldDocs('host')" 
             pTooltip="Click for documentation"></i>
          Host *
        </label>
        <input 
          id="client-host"
          type="text" 
          pInputText 
          formControlName="host" 
          placeholder="http://localhost:8080"
          class="w-full"
        />
        <small *ngIf="hasError(clientForm, 'host', 'required')" class="form-error-text">Host is required</small>
        <small *ngIf="hasError(clientForm, 'host', 'invalidUri')" class="form-error-text">Host must be a valid URL</small>
        <small *ngIf="hasError(clientForm, 'host', 'invalidProtocol')" class="form-error-text">Host must use http or https protocol</small>
      </div>
      
      <div class="field">
        <label for="client-urlbase">
          <i class="pi pi-question-circle field-info-icon" 
             (click)="openFieldDocs('urlBase')" 
             pTooltip="Click for documentation"></i>
          URL Base
        </label>
        <input 
          id="client-urlbase"
          type="text" 
          pInputText 
          formControlName="urlBase" 
          placeholder="(Optional) Path prefix"
          class="w-full"
        />
      </div>
      
              <div class="field" *ngIf="shouldShowUsernameField()">
          <label for="client-username">
            <i class="pi pi-question-circle field-info-icon" 
               (click)="openFieldDocs('username')" 
               pTooltip="Click for documentation"></i>
            Username
          </label>
          <input 
            id="client-username"
            type="text" 
            pInputText 
            formControlName="username" 
            placeholder="Username"
            class="w-full"
          />
        </div>
      
      <div class="field">
        <label for="client-password">
          <i class="pi pi-question-circle field-info-icon" 
             (click)="openFieldDocs('password')" 
             pTooltip="Click for documentation"></i>
          Password
        </label>
        <input 
          id="client-password"
          type="password" 
          pInputText 
          formControlName="password" 
          placeholder="Password"
          class="w-full"
        />
      </div>
    </ng-container>
  </form>

  <ng-template pTemplate="footer">
    <div class="modal-footer">
      <button 
        pButton 
        type="button" 
        label="Cancel" 
        class="p-button-text"
        (click)="closeClientModal()"
      ></button>
      <button 
        pButton 
        type="button" 
        label="Save" 
        icon="pi pi-save"
        class="p-button-primary ml-2"
        [disabled]="clientForm.invalid || downloadClientSaving()"
        [loading]="downloadClientSaving()"
        (click)="saveClient()"
      ></button>
    </div>
  </ng-template>
</p-dialog>

<!-- Confirmation Dialog -->
<p-confirmDialog></p-confirmDialog>
